/**
 * React不可变值的问题
 * 1、修改React状态的时候必须要使用setState进行修改，如果不使用setState进行修改都是违反原则的
 * 2、尤其对于对象和数组的修改问题，要使用setState它的值就必须产生的地址才可以使用到setState
 * 对于数组而言不要使用push或者unshift可变方法
 * 如果要想发现数组和对象的地址值不变，只是数组中的内容和对象中的内容变了，页面不会改变要等到函数组件hook的时候的时候就能发现
 * useState的时候
 */
import React, { Component } from 'react'
export default class StateDemo3 extends Component {
  constructor(){
    super()
    this.state={
      count:10,
      student:{
        name:'张三',
        age:23
      },
      list:['西瓜','苹果','草莓']
    }
  }
  render() {
    console.log('-----render--------');
    return (
      <div>
        <div>{this.state.count}</div>
        <div>{JSON.stringify(this.state.student)}</div>
        <div>
          <button onClick={()=>{
            // this.setState({
            //   count:this.state.count+1
            // })
            //this.state.count=this.state.count+1
            //this.forceUpdate()
            //this.setState({})

          }}>+</button>
          <button onClick={()=>{
            // this.state.student.age=this.state.student.age+1
            // this.forceUpdate()
             this.setState({
                student:{...this.state.student,age:this.state.student.age+1}
             })
          }}>修改对象中的值</button>

        </div>
        <hr />
        <div>{JSON.stringify(this.state.list)}</div>
        <div>
           <button onClick={()=>{
              
            // this.state.list.push('葡萄')
            // this.forceUpdate()

              this.setState({
                list:[...this.state.list,'葡萄']
              })
           }}>添加元素</button>

          <button onClick={()=>{
              //首先添加进去
              this.setState({
                list:['葡萄',...this.state.list]
              })
           }}>插入第1位</button>

           <button onClick={()=>{
              //this.state.list.splice(0,1)
              this.setState({
                list:this.state.list.filter((item,index)=>index!==0)
              })
           }}>删除</button>
        </div>
      </div>
    )
  }
}
